<template>
    <div>
        <!-- NowPlaying page is a children of Film -->
        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-immediate-check="check" infinite-scroll-distance="10">
            <li v-for="data in dataList" :key="data.filmId" @click="handleClick(data.filmId)">
                <img :src="data.poster" />
                <div>
                    <h4>
                        {{ data.name }}
                        <span>{{ data.item.name }}</span>
                    </h4>
                    <p v-if="data.grade">
                        观众评分
                        <span>{{ data.grade }}</span>
                    </p>
                    <p>主演：{{ data.actors | actorsFilter }}</p>
                    <p>{{ data.nation }} | {{ data.runtime }}分钟</p>
                </div>
                <h3>购票</h3>
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios';
import { Indicator } from 'mint-ui';
import { actorsFilterMixin } from '@/mixin';

export default {
    data() {
        return {
            dataList: [],
            loading: false,
            check: false, // 第一次加载时不触发loadMore()方法
            pageNum: 1, // 分页
            total: 0 // 记录总条数
        };
    },
    mounted() {
        // mintui 加载中，可以跨组件关闭
        Indicator.open({
            text: '加载中...',
            spinnerType: 'fading-circle'
        });
        // axios.get('https://m.maizuo.com/gateway?cityId=370100&pageNum=1&pageSize=10&type=1&k=914983').then(res => {
        //     console.log(res.data);
        // });
        axios({
            url: 'https://m.maizuo.com/gateway?cityId=370100&pageNum=1&pageSize=10&type=1&k=914983',
            method: 'GET',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"159668407331181462568961","bc":"370100"}',
                'X-Host': 'mall.film-ticket.film.list'
            }
        }).then(res => {
            this.dataList = res.data.data.films;
            this.total = res.data.data.total;
            // mintui 加载中，关闭
            Indicator.close();
        });
    },
    methods: {
        handleClick(id) {
            // this.$router.push(`/films/detail/${id}`); // 注意有${}时不能用引号ES6语法
            this.$router.push({
                name: 'Detail',
                params: { filmId: id }
            }); // 命名路由，使用name方式调用
        },
        loadMore() {
            this.loading = true; // 禁用无限滚动条触发事件
            this.pageNum++;

            // 防止最大页数后重复请求接口
            if (this.dataList.length >= this.total) {
                return;
            }

            axios({
                url: `https://m.maizuo.com/gateway?cityId=370100&pageNum=${this.pageNum}&pageSize=10&type=1&k=914983`,
                method: 'GET',
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"159668407331181462568961","bc":"370100"}',
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res => {
                this.dataList = [...this.dataList, ...res.data.data.films];
                this.loading = false; //  打开无限滚动条触发事件
            });
        }
    },
    mixins: [actorsFilterMixin]
};
</script>

<style lang="scss" scoped>
div {
    margin-left: 10px;
    margin-bottom: 40px;
    ul {
        padding: 5px;
        li {
            list-style: none;
            width: 100%;
            height: 105px;
            border-bottom: 1px solid #eeeeee;
            padding-top: 10px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            img {
                width: 66px;
                height: 93px;
            }
            div {
                flex: 1;
                margin-left: 10px;
                margin-bottom: 0;
                overflow: hidden;
                h4 {
                    margin: 0px;
                    padding-top: 8px;
                    font-weight: normal;
                    span {
                        background: #dddddd;
                        font-size: 12px;
                        color: #ffffff;
                    }
                }
                p {
                    font-size: 13px;
                    color: #797d82;
                    margin: 0px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    span {
                        color: lightsalmon;
                    }
                }
            }
            h3 {
                width: 50px;
                height: 20px;
                margin-top: 30px;
                margin-right: 5px;
                font-size: 13px;
                font-weight: normal;
                color: #ff5f16;
                border: 1px solid #ff5f16;
                text-align: center;
                padding-top: 2px;
            }
        }
    }
}
</style>
